<template>
	<!-- 封装的全局表单组件 -->
	<div class="fform flexcolumn">
		<!-- 遍历表单项 -->
		<div v-for="item,index in formList" :key="index" class="formcent" :class="layout" :id="item.id">
			<!-- label -->
			<div class="flexaic labeltext" v-if="item.labelicon||item.label">
				<div v-if="item.labelicon||item.rules" class="iconfont" :class="item.labelicon"></div>
				<div v-if="item.label">{{item.label}}</div>
			</div>
			<!-- 输入框  -->
			<fInput @sendcode="sendcode" v-if="item.formtype==='input'" class="fforminput flexaic conent"
				:disabled="item.disabled" :value.sync="item.value" :type="item.type" :password="item.password"
				:maxlength="item.max" :placeholder="item.placeholder" :inputID="item.inputID" :isclear="item.isclear"
				:beforeicon="item.beforeicon||''" />
			<!-- 自定义插槽 -->
			<div class="slotbox conent" v-if="item.formtype==='slot'">
				<slot :name='item.id' />
			</div>
			<!-- 富文本 -->
			<ftextarea v-if="item.formtype==='textarea'" class="fformtextarea flexaic conent" :disabled="item.disabled"
				:value.sync="item.value" :maxlength="item.max" :placeholder="item.placeholder"
				:inputID="item.inputID" />
			<!-- 字典列表 -->
			<fdict @change="changedict" :inputID="item.id" :value.sync="item.value" :rangekey="item.rangekey"
				v-if="item.formtype==='dict'" :valuekey="item.valuekey" :dictcode="item.dictcode"
				:disabled="item.disabled" class="fformdict flexaic conent" />
			<!-- 上传组件 -->
			<fupload :fuploadtype="item.fuploadtype" :isdownload="item.isdownload" :iscutoff="item.iscutoff" :ispreview="item.ispreview"
				:count="item.count" :sourceType="item.sourceType" :disabled="item.disabled" :value.sync="item.value"
				v-if="item.formtype==='upload'" class="fformupload flexaic conent" />
			<!-- 表单按钮 -->
			<fbutton @change="change" v-if="item.formtype==='button'" :disabled="item.disabled" :type="item.type"
				:ghost="item.ghost" :icon="item.icon" :border="item.border">{{item.value}}</fbutton>
		</div>
	</div>
</template>

<script>
	// 文本框组件
	import ftextarea from "@/compontent/form/ftextarea.vue"
	// 字典列表
	import fdict from "@/compontent/form/fdict.vue"
	// 上传组件
	import fupload from "@/compontent/form/fupload.vue"
	export default {
		name: 'fform', //封装的全局表单组件
		components: {
			ftextarea,
			fdict,
			fupload
		},
		props: {
			// 输入框初始内容
			formList: {
				type: [Array],
			},
			// 表单布局方式horizontal，vertical
			layout: {
				type: [String],
				default: "horizontal"
			}
		},
		data() {
			return {
				timeout: null, //定时器
				codetime: 0, //验证码倒计时时间
			}
		},
		methods: {
			// 发送验证码的事件，收到后准备定时器
			sendcode(fc) {
				// 传出发送验证码的方法
				var obj = this.formList.find(item => item.inputID === 'phone')
				// 使用正则函数进行判断
				var msg = this.regular.rulesTest('phone', obj.value)
				if (msg != '') {
					// 失败提醒
					return this.rest.tips('showtoast', msg, '', 'error')
				}
				// 唤起发送验证码接口
				this.base.sendVerifcodeApi({
					phone: obj.value
				}).then(res => {
					this.rest.tips('showtoast', "发送成功", '', 'success')
					fc()
				})
			},
			// 数据变化时触发
			change() {
				// 默认正则通过
				var rules = true
				var formData = {}
				// 表单校验
				this.formList.forEach(item => {
					// 如果正则存在,并且上一个通过时
					if (item.rules && rules) {
						if (item.value === '') {
							// 使用正则函数进行判断
							this.rest.tips('showtoast', item.placeholder.substr(0,3)+item.label, '', 'error')
							rules = false
						} else {
							// 使用正则函数进行判断
							var msg = this.regular.rulesTest(item.inputID, item.value)
							if (msg != '') {
								// 失败提醒
								this.rest.tips('showtoast', msg, '', 'error')
								rules = false
							}
						}
					}
					if (item.formtype !== 'button') {
						formData[item.id] = item.value
					}
				})
				// 如果校验通过的话，根据ID生成表单数据，传出
				if (rules) {
					this.$emit("submit", formData)
				}
			},
			// 清空输入框
			clear() {
				this.newvalue = ''
				this.change()
			}
		}
	}
</script>

<style lang="less" scoped>
	// 封装的全局表单组件
	.fform {

		// 表单内容
		.formcent {
			width: 100%;
			display: flex;
			margin-bottom: 30rpx;

			// 表单label
			.labeltext,
			.iconfont {
				font-size: 28rpx;
				color: #5E6880;
				margin-right: 10rpx;
			}

			// 必填图标
			.icon-asterisk {
				margin: 4rpx 0 0 0;
				color: #FF4242;
			}
		}

		// 表单布局方式,//竖向布局
		.horizontal {
			flex-direction: column;

			// 表单labeel
			.labeltext {
				margin-bottom: 15rpx;
			}

			// 表单内容
			.fforminput {
				padding: 0 10rpx 0 30rpx;
				height: 70rpx;
				background: #F6F8FC;
				border-radius: 50rpx;
			}
		}

		// 表单布局方式,//横向布局
		.vertical {

			// 表单labeel
			.labeltext {
				margin-right: 15rpx;
			}

			.fforminput,
			.slotbox {
				flex: 1;
			}
		}
	}
</style>